<template>
  <div class="madeDetail">
    <div class="newsHeader">
      <a href="#" @click="back">
        <img src="../../static/img/fanhui@2x.png" alt="">
      </a>
      <span>代言详情</span>
    </div>
    <div class="box" v-for="(img,index) in list">
      <p>{{img.name}}</p>
      <p>{{img.des}}</p>
     <div class="img_size" v-for="(imgs,index) in img.image">
       <img v-lazy="`${imgs}`" alt="">
     </div>
    </div>
  </div>
</template>
<style>
  .madeDetail {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
  }

  .newsHeader {
    width: 100%;
    z-index: 1;
    height: 1.3rem;
    line-height: 1.3rem;
    font-size: 15px;
    background: #3aab35;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-box-shadow: 0 0 10px #cecece;
    box-shadow: 0 0 10px #cecece;
    text-align: center;
    color: #fff;
  }

  .newsHeader img {
    display: block;
    float: left;
    width: 9px;
    height: 16px;
    padding: 16px;
    color: black;
  }
  .box{
    text-align: center;
    padding-top: 50px;
  }
 .img_size{
   width: 100%;
 }
  .img_size > img{
    width: 100%;
  }
</style>
<script>
  export default {
    mane: 'madeDetail',
    data() {
      return {
        list: []
      }
    },
    mounted() {
      this.getdetail()
    },
    methods: {
      getdetail() {
        var id = this.$route.query.id;
        var _this = this;
        this.$http.get("/static/made.json").then(res => {
          // console.log(res.body.list)
          for (var i = 0; i < res.body.list.length; i++) {
            if (res.body.list[i].id == id) {
              _this.list.push(res.body.list[i])
            }
          }

        })
      },
      back() {
        this.$router.go(-1)
      }
    }
  }
</script>
